<!--修改退款-->
<template>
  <div>
    <van-nav-bar title="修改退款" left-arrow @click-left="closeWin" :border="false">
      <van-icon name="arrow-left" slot="left" color="#000" size="20" />
    </van-nav-bar>
    <part1></part1>
    <!-- <part13
      :detailInfo="detailInfo"
      @func="getMsgFormSon"
      @func1="getMsgFormSon1"
      @func2="getMsgFormSon2"
      @func3="getMsgFormSon3"
      @func4="getMsgFormSon4"
      ref="child"
    ></part13> -->
    <!-- <part4></part4> -->


    <div style="width:100%;height:5px;background-color:#F8F8F8"></div>
    <div class="c">
      <div class="c_item">
        <div class="c_1">
          <span class="c_3" style="margin-left:8px;">服务类型</span>
          <span class="c_7" v-if="refundType==1 ">仅退款</span>
          <span class="c_7" v-if="refundType==2 ">退货退款</span>
          <span class="c_4" v-if="refundType=='' || refundType==null">必填</span>
        </div>
        <div class="c_2" @click="popup2" v-if="refundType=='' || refundType==null">
          请选择
          <van-icon name="arrow" class="icon" />
        </div>
        <div class="c_2" @click="popup2" v-if="refundType!='' || refundType!=null">
          <van-icon name="arrow" class="icon" />
        </div>
      </div>
    </div>

    <div style="width:100%;height:5px;background-color:#F8F8F8"></div>
    <div class="c" v-if=" refundType==1 ||  refundType==''">
      <div class="c_item">
        <div class="c_1">
          <span class="c_5">*</span>
          <span class="c_3" style="margin-left:5px;">货物状态</span>
          <span class="c_7" v-if=" goodsState==1 ">未收到货</span>
          <span class="c_7" v-if=" goodsState==2 ">已收到货</span>
          <span class="c_4" v-if=" goodsState=='' ||  goodsState==null ">必填</span>
        </div>
        <div class="c_2" @click="popup" v-if=" goodsState=='' ">
          请选择
          <van-icon name="arrow" class="icon" />
        </div>
        <div class="c_2" @click="popup" v-if=" goodsState!=''">
          <van-icon name="arrow" class="icon" />
        </div>
      </div>
    </div>
    <div class="c" v-if=" refundType==2">
      <div class="c_item">
        <div class="c_1">
          <span class="c_5">*</span>
          <span class="c_3" style="margin-left:5px;">退货方式</span>
          <span class="c_7" style="float:right">卖家同意退货后买家寄出退货商品</span>
        </div>
      </div>
    </div>
    <div class="c" v-if="goodsState==1 ">
      <div class="c_item">
        <div class="c_1">
          <span class="c_5">* </span>
          <span class="c_3" style="margin-left:5px;">退款原因</span>
          <span class="c_7" v-if=" refundReason=='快递一直未送到' ">快递一直未送到</span>
          <span class="c_7" v-if=" refundReason=='未按约定时间发货' ">未按约定时间发货</span>
          <span class="c_7" v-if=" refundReason=='快递无跟踪记录' ">快递无跟踪记录</span>
          <span class="c_7" v-if=" refundReason=='其他' ">其他</span>
          <span class="c_4" v-if=" refundReason=='' ">必填</span>
        </div>
        <div class="c_2" @click="popup3" v-if=" refundReason=='' ">
          请选择
          <van-icon name="arrow" class="icon" />
        </div>
        <div class="c_2" @click="popup3" v-if=" refundReason!='' ">
          <van-icon name="arrow" class="icon" />
        </div>
      </div>
    </div>
    <div class="c" v-if="goodsState==2 ">
      <div class="c_item">
        <div class="c_1">
          <span class="c_5">*</span>
          <span class="c_3" style="margin-left:5px;">退款原因</span>
          <span class="c_7" v-if="refundReason=='商品质量问题' ">商品质量问题</span>
          <span class="c_7" v-if="refundReason=='尺寸/容量与商品描述不符' ">尺寸/容量与商品描述不符</span>
          <span class="c_7" v-if="refundReason=='收到商品与描述不符' ">收到商品与描述不符</span>
          <span class="c_7" v-if="refundReason=='卖家发错货' ">卖家发错货</span>
          <span class="c_7" v-if="refundReason=='收到商品少件或破损' ">收到商品少件或破损</span>
          <span class="c_7" v-if="refundReason=='其他' ">其他</span>
          <span class="c_4" v-if="refundReason=='' ">必填</span>
        </div>
        <div class="c_2" @click="popup1" v-if=" refundReason=='' ">
          请选择
          <van-icon name="arrow" class="icon" />
        </div>
        <div class="c_2" @click="popup1" v-if=" refundReason!='' ">
          <van-icon name="arrow" class="icon" />
        </div>
      </div>
    </div>
    
    <div class="c1" v-if="refundType=='1' && goodsState=='0'">
      <div class="c_item1">
        <div class="c_1" style="margin-left:5px;">
          <span class="c_31">退款金额：</span>
          <span class="c_5" style="margin-top:10px;">¥ {{Number(detailInfo.ordersPrice)+Number(detailInfo.goodsFreight)}}</span>
        </div>
        <div class="c_1" style="margin-bottom:5px;">
          <span class="c_6" style="margin-left:5px;">不可修改，最多 ¥{{Number(detailInfo.ordersPrice)+Number(detailInfo.goodsFreight)}},含发货邮费 ¥{{detailInfo.goodsFreight}}</span>
        </div>
        <span class="c_6" style="margin-left:5px;color:red;">退款成功将收取1%“退款手续费”</span>
      </div>
    </div>

    <div class="c1" v-if="refundType=='2' || refundType=='1' && goodsState!='0'">
      <div class="c_item1">
        <div class="c_1" style="margin-left:5px;">
          <span class="c_5" style="margin-top:12px;margin-right:5px;">*</span>
          <span class="c_31">退款金额：</span>
          <span class="c_5" style="margin-top:10px;" @change="price">
              <van-field v-model="refundMoney" placeholder="必填" />
          </span>
        </div>
        <div class="c_1" style="margin-bottom:5px;">
          <span class="c_6" style="margin-left:5px;">可修改，最多不可超过 ¥{{Number(detailInfo.ordersPrice)+Number(detailInfo.goodsFreight)}}</span>
        </div>
        <span class="c_6" style="margin-left:5px;color:red;">退款成功将收取1%“退款手续费”</span>
      </div>
    </div>


    <div class="c">
      <div class="c_item">
        <div class="c_1">
          <span class="c_3">退款说明：</span>
          <span class="cc" @change="note">
              <van-field v-model="refundNote" placeholder="选填" @click="note"  style="width:250px;"/>
          </span>
        </div>
      </div>
    </div>


    <van-popup v-model="showReason2" position="bottom" :style="{ height: '50%' }" class="popup">
		    <div class="popup_title">服务类型</div>		   
		    <div class="popup_wrap">
		    	<div class="selectWrap" @click="type">
		    		<div class="section2">仅退款</div>
		    		<div class="section3">	    			
		    			<img src="../../../../../static/img/lanhu/74.png" alt="" v-if="refundType==1"/>
		    			<img src="../../../../../static/img/lanhu/73.png" alt="" v-else/>
		    		</div>
		    	</div>
		    	<div class="selectWrap" @click="types">
		    		<div class="section2">退货退款</div>
		    		<div class="section3">
		    			<img src="../../../../../static/img/lanhu/74.png" alt="" v-if="refundType==2"/>
		    			<img src="../../../../../static/img/lanhu/73.png" alt="" v-else/>
		    		</div>
		    	</div>	   	 
		    </div>	
		    
		    <div class="popup_btn">		    	
		    	<van-button  color="#FFD630" block @click="showReason2=false">确认</van-button>
		    </div>	
    </van-popup>


    <van-popup v-model="showReason" position="bottom" :style="{ height: '65%' }" class="popup">
      <div class="popup_title">货物状态</div>		   
		    <div class="popup_wrap">
		    	<div class="selectWrap" @click="state">
            <div class="section2">
              <div class="section2">未收到货</div>
              <div style="font-size:12px;color:#999999;margin-top:10px;display:block;">未收到货，或与商家协商后申请</div>
            </div>
		    		<div class="section3">	    			
		    			<img src="../../../../../static/img/lanhu/74.png" alt="" v-if="goodsState==1"/>
		    			<img src="../../../../../static/img/lanhu/73.png" alt="" v-else/>
		    		</div>
		    	</div>
		    	<div class="selectWrap" @click="states" @change="Cstate">
            <div class="section2">
              <div class="section2">已收到货</div>
              <div style="font-size:12px;color:#999999;margin-top:10px">已收到货，不符合商品描述</div>
            </div>
		    		<div class="section3">
		    			<img src="../../../../../static/img/lanhu/74.png" alt="" v-if="goodsState==2"/>
		    			<img src="../../../../../static/img/lanhu/73.png" alt="" v-else/>
		    		</div>
		    	</div>	   	 
		    </div>	
		    <div class="popup_btn">		    	
		    	<van-button  color="#FFD630" block @click="showReason=false">确认</van-button>
		    </div>
    </van-popup>
    <van-popup v-model="showReason1" position="bottom" :style="{ height: '65%' }">
      <div class="reason_title">退款原因</div>
      <div class="reason">
        <div class="reason_item">
          <div>商品质量问题</div>
          <div>
            <van-radio name="商品质量问题" checked-color="#ff6000" v-model="refundReason" @click="question1"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div>尺寸/容量与商品描述不符</div>
          <div>
            <van-radio name="尺寸/容量与商品描述不符" checked-color="#ff6000" v-model="refundReason" @click="question2"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div>收到商品与描述不符</div>
          <div>
            <van-radio name="收到商品与描述不符" checked-color="#ff6000" v-model="refundReason" @click="question3"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div>卖家发错货</div>
          <div>
            <van-radio name="卖家发错货" checked-color="#ff6000" v-model="refundReason" @click="question4"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div>收到商品少件或破损</div>
          <div>
            <van-radio name="收到商品少件或破损" checked-color="#ff6000" v-model="refundReason" @click="question5"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div>其他</div>
          <div>
            <van-radio name="其他" checked-color="#ff6000" v-model="refundReason" @click="question6"></van-radio>
          </div>
        </div>
      </div>
      <div class="btn" @click="close">关闭</div>
    </van-popup>
    <van-popup v-model="showReason3" position="bottom" :style="{ height: '65%' }">
      <div class="reason_title">退款原因</div>
      <div class="reason">
        <div class="reason_item">
          <div>快递一直未送到</div>
          <div>
            <van-radio name="快递一直未送到" checked-color="#ff6000" v-model="refundReason" @click="question7"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div>未按约定时间发货</div>
          <div>
            <van-radio name="未按约定时间发货" checked-color="#ff6000" v-model="refundReason" @click="question8"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div>快递无跟踪记录</div>
          <div>
            <van-radio name="快递无跟踪记录" checked-color="#ff6000" v-model="refundReason" @click="question9"></van-radio>
          </div>
        </div>
        <div class="reason_item">
          <div>其他</div>
          <div>
            <van-radio name="其他" checked-color="#ff6000" v-model="refundReason" @click="question6"></van-radio>
          </div>
        </div>
      </div>
      <div class="btn" @click="close">关闭</div>
    </van-popup>

    <div style="padding:20px">
    <div  class="title" style="margin-bottom:10px;">上传凭证<span style="font-size:12px;color:#e5e5e5e;">(最多6张)</span></div>
    <div class="imgList">
      <div v-for="(item,index) in imgList" class="imgContain" :key="index">
        <div class="clear" @click="delImg(index)">
          <img src="../../../../../static/img/lanhu/43.png" alt style="width: 13px;height: 13px;" />
        </div>
        <img :src="item" alt="" />
      </div>

      <div v-if="imgList.length < 6" @click="getImgUrl(imgList.length,6)" class="imgContain">
        <img src="../../../../../static/img/lanhu/87.png" alt="" />
      </div>
    </div>
  </div>
    <div class="btn" @click="apply" v-if="cansubmit==true">提交申请</div>
    <div class="btn1" style="backgroud-color:red" disabled v-if="cansubmit==false" >提交申请</div>
  </div>
</template>

<script>
import part1 from "_c/markets/refund/part1.vue";
import part4 from "_c/markets/refund/part4.vue";
import part13 from "_c/markets/refund/part13.vue";
import { getFun, getTimer } from "@/api/publicFun.js";
let publicFun = getFun();
export default {
  name: "orderDetail",
  components: {
    part1,
    part13,
    part4
  },
  data() {
    return {
      url1: this.$api + "/marketorderservice/api/v1/market/orders", // 获取订单详情的接口
      url2: this.$api + "/marketorderservice/api/v1/market/refund/apply/add", // 提交申请
      ordersId: "",
      userId: "",
      refundId: "",
      isBuyer: false, // 用于绑定是否是买家
      isSeller: false, // 用于绑定是否是卖家
      detailInfo: {}, // 绑定订单对象
      showReason: false,
      showReason1: false,
      showReason2: false,
      showReason3: false,
      refundType:-1,//退款类型
      goodsState: "", //货物状态
      refundMoney: "", //退款金额
      NewrefundMoney: "", //退款金额
      refundReason: "", //退款原因
      refundImage: "", //图片
      refundNote: "", //备注
      imgList: [], // 用于绑定已上传的图片数组（组件内部使用，在删除图片时用到）
      detailList:[],
      cansubmit: true,
    };
  },
  methods: {
    //初始化获取信息
    getData() {
      let that = this;
      this.$Axios
        .Get(this.url1 + "/" + this.ordersId + "/" + this.userId)
        .then(function(res) {
          if (res.responseCode) {
            // 判定是买家还是卖家
            if (res.data.orders.userId == that.userId) {
              that.isBuyer = true;
            }
            if (res.data.orders.suserId == that.userId) {
              that.isSeller = true;
            }
            that.detailInfo = res.data.orders;
            // that.refundMoney = res.data.orders.ordersPrice;
            that.NewrefundMoney = res.data.orders.ordersPrice + res.data.orders.goodsFreight;
          } else {
            that.$toast(res.messageList[0].message)
          }
        });
    },
    //获取图片
    getInfo() {
      let that = this;
      let url = this.$api+'/marketorderservice/api/v1/market/refund/log/list';
      let params = {
        refundId: this.refundId,
        userId: this.userId
      };
      this.$Axios.Post(url, params).then(function(res) {
        that.detailList = res.data.refundRVo.refund;
        that.refundType = res.data.refundRVo.refund.refundType;
        if(that.refundType=='1'){
          that.refundMoney=that.NewrefundMoney
        }else{
          that.refundMoney=''
        }
        that.refundMoney = res.data.refundRVo.refund.adminRefundAmount;
        that.goodsState = res.data.refundRVo.refund.goodsState;
        that.refundReason = res.data.refundRVo.refund.refundReason;
        if(res.data.refundRVo.refund.refundImage){
          that.imgList = res.data.refundRVo.refund.refundImage.split(',');
          that.refundImage = res.data.refundRVo.refund.refundImage;
        }   
        that.refundNote = res.data.refundRVo.refund.refundNote;
      });   
    },
    popup() {
      this.showReason = true;
    },
    popup1() {
      this.showReason1 = true;
    },
    popup2(){
      this.showReason2 = true;
    },
    popup3(){
      this.showReason3 = true;
    },
    tip(){
      this.$toast('请先选择货物状态');
    },
    Cstate(){
      this.refundReason=''
    },
    question1(){
      this.refundReason = '商品质量问题'
      // this.$emit('func2',this.refundReason)
    },
    question2(){
      this.refundReason = '尺寸/容量与商品描述不符'
      // this.$emit('func2',this.refundReason)
    },
    question3(){
      this.refundReason = '收到商品与描述不符'
      // this.$emit('func2',this.refundReason)
    },
    question4(){
      this.refundReason = '卖家发错货'
      // this.$emit('func2',this.refundReason)
    },
    question5(){
      this.refundReason = '收到商品少件或破损'
      // this.$emit('func2',this.refundReason)
    },
    question6(){
      this.refundReason = '其他'
      // this.$emit('func2',this.refundReason)
    },
    question7(){
      this.refundReason = '快递一直未送到'
      // this.$emit('func2',this.refundReason)
    },
    question8(){
      this.refundReason = '未按约定时间发货'
      // this.$emit('func2',this.refundReason)
    },
    question9(){
      this.refundReason = '快递无跟踪记录'
      // this.$emit('func2',this.refundReason)
    },
    note(){
      // this.$emit('func3',this.refundNote)
    },
    price(){
      // this.$emit('func4',this.refundMoney)
    },
    close() {
      this.showReason = false;
      this.showReason1 = false;
      this.showReason2 = false;
      this.showReason3 = false;
    },
    type(){
      this.refundType = 1
      this.refundReason=''
      this.refundMoney=''
      // this.$emit('func',this.refundType)
    },
    types(){
      this.refundType = 2
      this.refundMoney=''
      this.refundReason=''
      // this.$emit('func',this.refundType)
    },
    state(){
      this.goodsState = 1
      this.refundReason=''
      // this.$emit('func1',this.goodsState)
    },
    states(){
      this.goodsState = 2
      this.refundReason=''
      // this.$emit('func1',this.goodsState)
    },
    apply() {
      let reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
	   	if(!reg.test(this.refundMoney)){
	   	 	this.$toast('请输入正确的退款金额')
	   	 	return false	   	 	
      }
      if(!this.refundMoney){
        this.$toast("请输入退款金额！")
      }else if(Number(this.refundMoney)>Number(this.NewrefundMoney)){
        this.$toast("退款金额不得大于实际支付金额！")
      }else if(Number(this.refundMoney) < 0){
        this.$toast("退款金额不得小于0")
      }else if(this.refundReason=='' || this.refundReason==null){
        this.$toast("请选择退款原因！")
      }else{
        let that = this;
        let url2 = this.$api + "/marketorderservice/api/v1/market/refund/apply/add";
        let params = {
          ordersId: this.ordersId,
          userId: this.userId,
          refundType: this.refundType, //退款类型
          goodsState: this.goodsState, //货物状态
          refundReason: this.refundReason, //退款原因
          refundMoney: this.refundMoney, //退款金额
          refundNote: this.refundNote, //备注
          refundImage: this.refundImage //图片
        };
        this.$Axios2.Post(url2, params).then(function(res) {
          that.refundId = res.data.refundId;
          that.closeWin();
          if(that.refundId!=null){
            // let arg ='[{"ordersId":"' + that.ordersId + '"},{"refundId":"' + that.refundId + '"}]';
            // let url = that.concatUrl('/market/orders/refunds',arg)  
            // sessionStorage.setItem("disabledbtn", "true");
          }else{
            that.$toast(res.messageList[0].message);
          }       
        });
      }
    },
    // 获取图片地址后的回调
    callJSGetImgUrl(str) {
      this.imgList = this.imgList.concat(str.split(","));
      this.refundImage = this.imgList.join();
    },
    // 删除图片
    delImg(index) {
      this.imgList.splice(index, 1);
      this.refundImage = this.imgList.join();
    }
  },
  created(){
    var lastname = sessionStorage.getItem("disabledbtn");
    if(lastname=='true'){
      this.cansubmit = false
    }
  },
  mixins: [publicFun], //混入
  mounted() {
    this.userId = this.$router.currentRoute.query.userId;
    this.ordersId = this.$router.currentRoute.query.ordersId;
    this.refundId = this.$router.currentRoute.query.refundId;
    this.getData();
    this.getInfo();
    window.callJsGetLocation = this.callJsGetLocation; // 挂载获取地址回调方法
    window.callJSGetImgUrl = this.callJSGetImgUrl; // 挂载获取图片回调方法
    
  }
};
</script>

<style scoped="" lang="scss">
.wrap {
  padding: 25px 30px;
  text-align: center;
}
.foot {
  position: fixed;
  bottom: 5px;
  text-align: center;
  margin: 0 auto;
  left: 20%;
}
.btn {
  width: 100%;
  height: 40px;
  font-size: 16px;
  text-align: center;
  line-height: 40px;
  background-color: #ffd630;
  position: fixed;
  bottom: 0;
  z-index: 2000;
}
.btn1 {
  width: 100%;
  height: 40px;
  font-size: 16px;
  text-align: center;
  line-height: 40px;
  background-color: #dddddd;
  position: fixed;
  bottom: 0;
  z-index: 2000;
}
.title{
  font-size:14px;
  font-weight:bold;
  color:rgba(51,51,51,1);
  margin-bottom: 5px;
}
.imgList:after{content:"";display:block;clear:both;}
.imgList .imgContain{float: left;margin-right: 3%;width:23.5%;margin-bottom: 10px;position: relative;}
.imgList .imgContain img{width: 100%;height: 80px;}
.imgList .imgContain:nth-child(3n){margin-right: 0;}
.clear{position: absolute;right: -6px;top: -6px;z-index: 100;}
.a {
  padding: 15px;
}
.b {
  width: 100%;
}
.text {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
}
.txt {
  font-size: 12px;
  font-weight: bold;
  color: #333333;
  float: right;
}
.c {
  padding: 15px;
  padding-bottom: 0px;
  background: #fff;
  /* margin-bottom: 10px; */
  border-bottom: 1px solid #f8f8f8;
}
.c1 {
  padding: 5px 15px;
  background: #fff;
  margin-bottom: 10px;
  border-bottom: 1px solid #f8f8f8;
}
.c11 {
  padding: 5px 15px;
  background: #fff;
}
.c_item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.c_item1 {
  justify-content: space-between;
  margin-bottom: 10px;
}
.c_1 {
  align-items: center;
  display: flex;
}
.c_3 {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  display:flex;
}
.c_31 {
  padding: 10px 0 0 0;
  font-size: 14px;
  font-weight: bold;
  color: #333333;
}
.c_4 {
  margin-left: 15px;
  color: #aaa;
  display:flex;
  font-size:13px;
}
.c_7 {
  margin-left: 15px;
  font-size: 13px;
  /* font-weight: bold; */
  color: #333333;
  display:flex;
}
.cc{
  // margin-left: 70px;
  // margin-top: -20px;
  color: #aaa;
  display:flex;
  font-size:13px;
}
.icon {
  vertical-align: -2px;
}
.c_2 {
  color: #aaa;
  font-size: 14px;
}
.c_5 {
  font-size: 13px;
  color: #f22613;
}
.c_6 {
  padding-top: 10px;
  font-size: 12px;
  color: #999999;
}

.content {
  width: 90%;
  margin: 0 auto;
  border-bottom: 1px solid #e5e5e5;
}
.tit {
  padding: 5px;
}
.t_1 {
  font-size: 12px;
  padding: 5px;
  color: #333333;
  font-weight: bold;
}
.t_2 {
  padding: 5px 0 10px 5px;
  font-size: 12px;
  color: #999999;
}
.van-cell {
  padding: 0;
}
/* .reason_title {
  text-align: center;
  padding: 25px 0;
  font-size: 20px;
} */
.reason_title {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  padding: 20px;
  color: rgba(51, 51, 51, 1);
}
.reason {
  padding: 0 10px;
}
.reason_item {
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  margin-bottom: 10px;
}
.reason_item:nth-last-child(1) {
  border: none;
}
.btn {
  width: 100%;
  height: 40px;
  font-size: 16px;
  text-align: center;
  line-height: 40px;
  background-color: #ffd630;
  position: fixed;
  bottom: 0;
}
.popup{
	.popup_title{font-size: 14px;padding: 21px;text-align: center;font-weight: 500;}	
	.popup_btn{position: absolute;bottom: 0;left: 0;width: 100%;}	
	.popup_wrap{margin-top: 10px;background: #fff;padding: 0 20px;
	 .selectWrap{padding: 15px 0;display: flex;align-items: center;border-bottom: 1px solid #f0f0f0;}
	 .selectWrap:nth-last-child(1){border:none}
	 .section3 img{width: 14px;display: block;}
	 .section2{flex: 1;}   
	}		
}
</style>